'use client'

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { MessageSquare } from "lucide-react";

interface Friend {
  id: string;
  username: string;
  avatar: string | null;
  status?: string;
}

interface FriendDetailCardProps {
  friend: Friend;
  onSendMessage: (friend: Friend) => void;
}

export default function FriendDetailCard({ friend, onSendMessage }: FriendDetailCardProps) {
  return (
    <div className="h-full w-full flex items-center justify-center bg-gray-50 dark:bg-stone-800">
      <div className="w-full max-w-sm p-8 bg-white dark:bg-stone-900 rounded-2xl shadow-xl flex flex-col items-center">
        <Avatar className="h-24 w-24 mb-4">
          <AvatarImage src={friend.avatar || undefined} alt={friend.username} />
          <AvatarFallback className="text-4xl">
            {friend.username?.charAt(0).toUpperCase()}
          </AvatarFallback>
        </Avatar>
        <h2 className="text-2xl font-bold mb-1">{friend.username}</h2>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">ID: {friend.id}</p>
        <Button onClick={() => onSendMessage(friend)} className="w-1/2">
          <MessageSquare size={16} className="mr-2" />
          发消息
        </Button>
      </div>
    </div>
  );
}